<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            /*margin: 0;*/
            padding: 0;
        }

        body {
            position: relative;
            text-align: center;
        }

        .dropdown_warp {
            display: inline-block;
            margin-top: 150px;
            margin-right: 1000px;
        }

        .dropdown_warp > ul > li {
            list-style: none;
            background: rgba(50, 50, 50, 0.72);
            border-bottom: 4px solid #ebff04;
        }

        .dropdown_warp > ul > li:last-of-type {
            border-bottom: none;
        }

        .dropdown_warp > ul > li:hover {
            background: #ea420e;
        }

        .dropdown_warp > ul > li > a {
            text-decoration: none;
            font-size: 30px;
            color: #000000;
            font-family: 楷体;
        }

        .dropdown_warp > ul > li > .ul_content > li {
            list-style: none;
            border-bottom: 2px solid rgba(1, 187, 255, 0.7);
        }

        .dropdown_warp > ul > li > .ul_content {
            display: none;
        }

        .dropdown_warp > ul > li > .ul_content > li:last-of-type {
            border-bottom: none;
        }

        .dropdown_warp > ul > li > .ul_content > li:first-of-type {
            border-top: 3px solid #000000;
        }

        .dropdown_warp > ul > li > .ul_content > li:hover {
            background: rgba(255, 253, 195, 0.99);
            border-radius: 25px;
        }

        .dropdown_warp > ul > li > .ul_content > li > a {
            text-decoration: none;
            font-family: 隶书;
            color: rgb(163, 158, 35);
            font-size: 25px;
        }
    </style>
    <script src="../../jquery-js/jquery.js"></script>
    <script src="js/snabbt.js"></script>
    <script src="js/mo.js"></script>
    <script>
        $(function () {
            //打开页面时隐藏下拉列表
            // $('.ul_content').hide();

            $('.dropdown_warp>ul>li').click(function () {
                $(this).children('.ul_content').slideDown(1000);
                $(this).siblings().children('.ul_content').slideUp();
            });

            // $('.dropdown_warp>ul>li:first').find('.ul_content').css({display:'block'});
            // $()

            // $('#button').click(function () {
            //     $('.dropdown_warp').snabbt({
            //     });
            // });
        });
    </script>
</head>
<body>
<!--<button id="button" style="float: left;position: absolute;top: 50px;left: 50px;width: 50px;height: 30px;">按钮</button>-->
<div class="dropdown_warp">
    <ul>
        <li>
            <a href="javascript:void (0);">一级菜单</a>
            <ul class="ul_content">
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void (0);">一级菜单</a>
            <ul class="ul_content">
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void (0);">一级菜单</a>
            <ul class="ul_content">
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
                <li><a href="javascript:void(0);">二级菜单</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>